<template>
	<view id="app">
		<view class="container">
			<uv-search :showAction="false" placeholder="师傅搜索" v-model="keyword" :clearabled="true" bgColor="#ffffff"></uv-search>
		</view>
		<view class="container">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" interval="3000" indicator-active-color="#FFAC3E" indicator-color="#aaa"
							duration="500">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<view class="swiper-item">
						<image :src="item.image"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="container">
			<view class="rows bgw w100p ptb20 plr20">
				<view class="r1 df" @click="openarea">
					<view class="c000 f30 fw8">{{areaTxt}}</view>
					<uv-icon name="arrow-down" color="#000" size="30rpx"></uv-icon> </view>
				<view class="df" @click="opensearch">
					<view class="c000 f30 fw8">筛选</view>
					<uv-icon name="arrow-down" color="#000" size="30rpx"></uv-icon>
				</view>
			</view>
		</view>
		<view class="container fdc">
			<view  class="df fdc bgw mb20  ptb15" v-for="(item,index) in list" :key="index">
				<view class="df w100p aic plr15 bdb1s brcce pb20" @click="handle('user/cate/detail?id='+item.user_id)">
					<view class="wh140 mr20">
						<uv-avatar :src="item.avatar" size="140rpx"></uv-avatar>
					</view>
					<view class="f1 df fdc mb20">
						<view class="df ptb20 aic">
							<view class="c000 f30 fw8 mr10">{{item.name}}</view>
							<uv-tags text="实名认证" type="warning" plain size="mini" v-if="item.is_auth == 1"></uv-tags>
						</view>
						<view class="df jcl thd">
							<view class="bgwaring ptb10 f24 cw plr15 br15 mr15" v-if="item.great_name !=''">{{item.great_name}}</view>
							<view class="bgwaring ptb10 f24 cw plr15 br15 mr15" v-if="item.great_images !=''">专业技能证书</view>
							<view class="bgwaring ptb10 f24 cw plr15 br15 mr15 " v-if="item.workage == 1">3年经验</view>
							<view class="bgwaring ptb10 f24 cw plr15 br15 mr15 " v-if="item.workage == 2">5年经验</view>
							<view class="bgwaring ptb10 f24 cw plr15 br15 mr15 " v-if="item.workage == 3">10年经验</view>
							<view class="bgwaring ptb10 f24 cw plr15 br15 mr15 " v-if="item.workage == 4">10多年经验</view>
						</view>
					</view>
				</view>
				<view class="mt20 df fdc"  v-if="item.cases.length > 0">
					<view class="plr15 f28 c666">施工案例</view>
					<view class="mt20 w100p pl10">
						<uv-album :urls="item.cases" keyName="thumb" singleSize="690rpx" multipleSize="230rpx"  space="10rpx" :showMore="false"></uv-album>
					</view>
				</view>
			</view>
			<uv-load-more status="nomore" v-if="!more"/>
		</view>
		<view class="wh80"></view>
		<uv-popup ref="area" mode="bottom" :close-on-click-overlay="false" :closeable="true" custom-style="min-height: 1000rpx;" round="15rpx">
			<view class="container bgw df fdc">
				<view class="pt10 pb30 tac f28 c000">所在区域</view>
				<view class="rows ptb20 plr20">
					<view class="cinfo f30 fw8">{{areaTxt}}</view>
					<view class="plr15 ptb10 bd1s brcce c666 f26 br15" @click="islocation">附近区域</view>
				</view>
				<view style="height:1000rpx;width:100%;position: relative;">
					<uv-index-list :index-list="indexList" inactiveColor="#ffffff00" activeColor="#ffffff00">
						<block v-for="(item, index) in itemArr" :key="index">
							<uv-index-item>
								<uv-index-anchor :text="indexList[index]"></uv-index-anchor>
								<view class="list-cell" v-for="(cell, i) in item" :key="i" @click="areachoose(cell)">
									{{cell.short_name}}
								</view>
							</uv-index-item>
						</block>
					</uv-index-list>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="search" mode="bottom" :close-on-click-overlay="false" :closeable="true" custom-style="min-height: 200rpx;" round="15rpx">
			<view class="container bgw df fdc">
				<view class="pt10 pb30 tac f28 c000 bdb1s brcce">筛选</view>
				<view>
					<uv-checkbox-group labelSize="30rpx" labelColor="#000"
						v-model="plate" 
						placement="column" 
						iconPlacement="right">
						<uv-checkbox name="auth" label="平台认证" customStyle="padding-top:10px; padding-bottom:10px;border-bottom:1px solid #eee;font-weight:800;"></uv-checkbox>
					</uv-checkbox-group>
				</view>
				<view>
					<uv-checkbox-group labelSize="30rpx" labelColor="#000"
						v-model="auth" 
						placement="column" 
						iconPlacement="right">
						<uv-checkbox name="auth" label="实名认证" customStyle="padding-top:10px; padding-bottom:10px;border-bottom:1px solid #eee;font-weight:800;"></uv-checkbox>
					</uv-checkbox-group>
				</view>
				<view class="ptb20 plr20">
					<view class="c000 f30 c000 fw8">工龄</view>
				</view>
				<view class="ptb20 plr20 rows">
					<block v-for="(item,index) in workitems" :key="index">
					<view @click="workchoose(item.id)" class="ptb10 plr20 br15" :class="workage == item.id ? `bginfo`:`bgddd`">
						{{ item.name }}
					</view>
					</block>
				</view>
				<view class="plr20 ptb20">
					<uv-button text="确认" color="#145cfe" @click="qureSearch()"></uv-button>
				</view>
			</view>
		</uv-popup>
		<uv-tabbar :value="1" iconSize="50rpx" activeColor="#FFAC3E" inactiveColor="#9ea09f" zIndex="1000"
			:fixed="true">
			<uv-tabbar-item text="首页"  @click="reLaunch()">
				<template v-slot:active-icon>
					<image class="wh50" :src="uselected"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="wh50" :src="uselecte"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="找工匠">
				<template v-slot:active-icon>
					<image class="wh50" :src="ugjd"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="wh50" :src="ugj"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="消息" icon="chat" @click="redirect('user/message/message',true)"></uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account" @click="redirect('user/mine/mine',true)"></uv-tabbar-item>
		</uv-tabbar>
		
	</view>
</template>
<script>
	let that;
	export default {
		data() {
			return {
				uselected:this.util.config.host+'/static/images/uhomed.png',
				uselecte:this.util.config.host+'/static/images/home.png',
				ugjd:this.util.config.host+'/static/images/gjd.png',
				ugj:this.util.config.host+'/static/images/gj.png',
				keyword:'',
				workage:0,
				workitems:[
					{id:'1',name:'3年以下'},
					{id:'2',name:'3-5年'},
					{id:'3',name:'5-10年'},
					{id:'4',name:'10年以上'}
				],
				indexList: ["A", "B", "C", "D", "E", "F", "G"],
				itemArr: [],
				banner:[],
				areaTxt:"附近地区",
				areaCode:"",
				auth:[],
				plate:[],
				list:[],
				page:1,
				more:true,
				nodata:true,
			}
		},
		onLoad(){
			that = this;
			this.getCity();
			this.Banner();
		},
		onShow(){
			that.reLoad();
		},
		onReachBottom(){
			if(that.more == false){
				return false;
			}
			that.getList();
		},
		methods: {
			getCity:function(){
				let that = this;
				this.request({
					url: '/api/index/city'
				}).then((res)=>{
					if(res.code == 200){
					that.indexList = res.data.index;
					that.itemArr = res.data.value;
					}
				})
			},
			reLoad() {
				// 格式化页码
				that.page = 1
				that.list = []
				that.more = true
				that.nodata = true
				// 获取产品列表
				that.getList();
			},
			getList:function(){
				let page = that.page
				let keyword = that.keyword;
				let code = that.areaCode;
				let is_great = 0;
				let is_auth = 0
				if(this.plate.length == 1){
					is_great = 1;
				}
				if(this.auth.length == 1){
					is_auth = 1;
				}
				that.request({
					url:'/api/index/csearch',
					data:{
						keyword:keyword,
						city_code:code,
						is_great:is_great,
						is_auth:is_auth,
						workage:this.workage,
						page:page,
					},
					load:1,
					success:function(res){
					if(res.code == 200){
						if(page == 1){
							that.list = res.data;
							if(res.data.length == 0){
								that.nodata=false;
							}
						}else{
							that.list.push(...res.data)
						}
						that.more = res.data.length < 10 ? false : true;
						that.page=page+1;
					}
				}})
			},
			Banner: function() {
				let that = this;
				that.request({
					url: '/api/index/banner',
					data: {
						type: 'gSwiper'
					},
					success: function(res) {
						if (res.code == '200') {
							that.banner = res.data;
						}
					},
				});
			},
			openarea(){
				this.$refs.area.open();
			},
			opensearch(){
				this.$refs.search.open();
			},
			workchoose(e){
				if(this.workage == e){
					this.workage = 0;
				}else{
					this.workage = e;
				}
				
			},
			qureSearch(){
				this.reLoad();
				this.$refs.search.close();
			},
			areachoose(e){
				this.areaTxt = e.short_name;
				this.areaCode = e.id;
				this.reLoad();
				this.$refs.area.close();
				console.log(e);
			},
			handle(e){
				uni.navigateTo({
					url:"/pages/"+e
				})
			},
			islocation:function(){
				this.showlocation();
			},
			showlocation:function(){
				let that = this;
				this.util.getLocation(function(res){
					console.log(res);
					//this.location.lat = res.latitude,
					//this.location.lng = res.longitude,
					//res.latitude,res.longitude
					let openid = uni.getStorageSync('QLXG_openid');
					that.request({
						url:'/api/index/location',
						data:{lat:res.latitude,lng:res.longitude,openid:openid},
						success:function(rs){
							if(rs.code =='200'){
								that.areaCode = rs.data.city_id
								that.areaTxt = "附近地区";
								that.reLoad();
								that.$refs.area.close();
							}
						}
					})
				})
			},
			redirect:function(e,isLogin=false){
				if(isLogin == true){
					if(!uni.getStorageSync('QLXG_token')){
						uni.navigateTo({
							url:"/pages/user/index/login"
						})
						return false;
					}
				}
				uni.redirectTo({
					url:"/pages/"+e,
				})
			},
			reLaunch:function(){
				uni.reLaunch({
					url:"/pages/index/index",
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.swiper {
			height: 300rpx;width:100%;
		}
	.swiper-item {
		display: block;border-radius: 15rpx;overflow: hidden;
		height: 300rpx;
		image{border-radius: 15rpx;}
	}
	.item-top{height:432rpx;image{border-radius:15rpx 15rpx 0 0 ;}}
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10rpx 20rpx;
		overflow: hidden;
		color: #323233;
		font-size: 24rpx;
		background-color: #fff;
	}
</style>
